<template>
    <div>
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        :header-cell-style="{background:'hsl(199 16% 85% / .5)'}"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="name"
          label="日期"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          sortable>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        layout="prev, pager, next"
        :total="50">
      </el-pagination>
    </div>
</template>

<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    data() {
      return {
        tableData: []
      }
    },mounted() {
         this.axios({
             url:'http://test.org/employee/list',
             method:'get'
         }).then((res)=>{
             console.log(res.data);
             this.tableData = res.data;
         })
    }
  }
</script>

<style scoped>

</style>
